<template>
	<transition name="fade">
    <div class="lightbox" v-if="visible">
			<div class="wraper">
				<div class="img-wraper"><img :src="delaySrc" /></div>
			</div>
			<div class="iconfont close" @click="visible = false">&#xe6f3;</div>
    </div>
  </transition>
</template>

<script>
	export default {
    name: "lightbox",
		mounted() {
			setTimeout(()=>{
				this.delaySrc = this.src
			}, 100)
		},
    data() {
      return {
        src: '',
        visible: false,
				title: '',
				delaySrc: ''
      }
    }
  }
</script>

<style lang="scss" scoped>
	@import '../../../assets/css/base.scss';
	.lightbox{
		display: flex;
		align-items: center;
		justify-content: center;
		position: fixed;
		background: $bg-mask;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 999;
		opacity: 1;
		.wraper{
			width: 90%;
			height: 80%;
			display: flex;
			justify-content: center;
		}
		.img-wraper{
			display: inline-flex;
			align-items: center;
			img{
				max-height: 100%;
				max-width: 100%;
			}
		}
		.close{
			position: fixed;
			right: .8em;
			top: .8em;
			font-size: 40px;
			color: rgba(255,255,255,0.5);
			cursor: pointer;
			&:hover{
				color: #fff;
			}
		}
	}
	.fade-enter-active,.fade-leave-active{
		transition: all .2s;
	}
	.fade-enter, .fade-leave-to{
		opacity: 0;
	}
</style>
